import { useDOM, useReactive } from '../lib';

function App() {
    const state = useReactive({
        count: 0,
        name: 'supulu'
    });
    const add = function (num) {
        state.count += num;
    }

    const minus = function (num) {
        state.count -= num;
    }

    const changeName = function (newName) {
        state.name = newName;
    }

    return {
        template: `
            <h1>{{count}}</h1>
            <h2>{{name}}</h2>
            <button onClick="add(2)">+</button>
            <button onClick="minus(1)">-</button>
            <button onClick="changeName('苏普路')">修改名称</button>
        `,
        state,
        methods: {
            add,
            minus,
            changeName
        }
    }
}
useDOM(
    App(), //template/state/methods
    document.querySelector('#app')
);

